<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zhangye
  Date: 2020-05-02
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>www.jb51.net JS分页</title>
    <script>
        /**
         * 分页函数
         * pno--页数
         * psize--每页显示记录数
         * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
         * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
         **/
        function goPage(pno,psize){
            var itable = document.getElementById("idData");
            var num = itable.rows.length;//表格所有行数(所有记录数)
            console.log(num);
            var totalPage = 0;//总页数
            var pageSize = psize;//每页显示行数
            //总共分几页
            if(num/pageSize > parseInt(num/pageSize)){
                totalPage=parseInt(num/pageSize)+1;
            }else{
                totalPage=parseInt(num/pageSize);
            }
            var currentPage = pno;//当前页数
            var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
            var endRow = currentPage * pageSize;//结束显示的行  40
            endRow = (endRow > num)? num : endRow;  //40
            console.log(endRow);
            //遍历显示数据实现分页
            for(var i=1;i<(num+1);i++){
                var irow = itable.rows[i-1];
                if(i>=startRow && i<=endRow){
                    irow.style.display = "block";
                }else{
                    irow.style.display = "none";
                }
            }
            var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
            if(currentPage>1){
                tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
                tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
            }else{
                tempStr += "首页";
                tempStr += "<上一页";
            }
            if(currentPage<totalPage){
                tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
                tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
            }else{
                tempStr += "下一页>";
                tempStr += "尾页";
            }
            document.getElementById("barcon").innerHTML = tempStr;
        }
    </script>
</head>
<body onLoad="goPage(1,2);">
<table id="idData" width="70%">
    <c:forEach begin="1" end="30">
        <tr><td>user1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    </c:forEach>
</table>
<table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
</table>
</body>
</html>
